<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Index Example</title>
	<link rel="stylesheet" type="text/css" href="../libs/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../libs/easyui/themes/icon.css">
	<style type="text/css">
		body {
			padding-left: 20px;
			padding-top: 10px;
		}
	</style>
	<script type="text/javascript" src="../libs/jquery.min.js"></script>
	<script type="text/javascript" src="../libs/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../libs/easyui/datagrid-bufferview.js"></script>
</head>
<body>
	<h2>DataGrid Buffer View Demo</h2>
     
    <div id="tt" title="DataGrid - BufferView" style="width:700px;height:300px">
    </div>
	
    <script type="text/javascript">
        $(function(){
            $('#tt').datagrid({
				view: bufferview,
				rownumbers: true,
				singleSelect: false,
				autoRowHeight: false,
				pageSize: 50,
				columns: [[
					{field:'ck',checkbox:true},
					{field:'inv',title:'Inv No',width:80},
					{field:'date',title:'Date',width:100},
					{field:'name',title:'Name',width:80},
					{field:'amount',title:'Amount',width:80,align:'right'},
					{field:'price',title:'Price',width:80,align:'right'},
					{field:'cost',title:'Cost',width:100,align:'right'},
					{field:'note',title:'Note',width:110}
				]]
			});
			loadLocal();
        });
        function loadLocal(){
            var rows = [];
            for(var i=1; i<=800; i++){
                var amount = Math.floor(Math.random()*1000);
                var price = Math.floor(Math.random()*1000);
                rows.push({
                    inv: 'Inv No '+i,
                    date: $.fn.datebox.defaults.formatter(new Date()),
                    name: 'Name '+i,
                    amount: amount,
                    price: price,
                    cost: amount*price,
                    note: 'Note '+i
                });
            }
            $('#tt').datagrid('loadData', rows);
        }
    </script>
    <style type="text/css">
        .datagrid-header-rownumber,.datagrid-cell-rownumber{
            width:35px;
        }
    </style>
</body>
</html>